<template>
	<view class="container">
		<uv-navbar title="成品预览" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="pop-box">
			<view class="music-item">
				<view class="title2">这里显示视频的描述文案，这里显示视频的描述文案，这里显示视频的描述文案</view>
				<view class="image-box">
					<image v-for="item in 5" class="image" src="/static/images/profile.jpg" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="button-fb-box">
			<view class="button-fb-s" @click="inSubmit">上一步</view>
			<view class="button-fb" @click="onSubmit">保存到视频素材库</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {};
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			preview() {
				wx.previewMedia({
					current: 0,
					sources: [{
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
						type: 'video',
						poster: 'https://cdn.uviewui.com/uview/album/1.jpg'
					}],
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},

			onSubmit() {
				app.navigationTo('pages/material/material')
			},
			inSubmit() {
				// app.navigationTo('page_account/create/official')
				app.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		padding: 42rpx;
		padding-top: 226rpx;
		padding-bottom: calc(96rpx + 32rpx + 42rpx);
		box-sizing: border-box;
		background: #F7F8FA;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);


		.pop-box {

			.music-item {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.3);
				box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(255, 255, 255, 0.08);
				border: 3rpx solid #FFFFFF;
				border-radius: 32rpx;
				margin-bottom: 20rpx;

				.image-box {
					position: relative;
					display: flex;
					flex-wrap: wrap;
					width: 100%;

					.image {
						flex-shrink: 0;
						width: calc(100% / 3 - 20rpx);
						height: 190rpx;
						border-radius: 16rpx;
						margin: 0 10rpx 10rpx 0;
					}
				}



				.title1 {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 48rpx;
				}

				.title2 {
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
					margin-bottom: 32rpx;
				}


			}
		}


		.button-fb-box {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

			.button-fb {
				width: 326rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}

			.button-fb-s {
				width: 326rpx;
				height: 96rpx;
				border: 2rpx solid #4635FF;
				border-radius: 48rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #4635FF;
				line-height: 96rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}
	}
</style>